<!DOCTYPE html>
<html>
	<head>
		<!-- meta元信息，charset字符集，utf-8中文乱码 -->
		<meta charset="utf-8">
		<title>永和小票</title>
		<!-- 样式设计写在style标签中，key:value -->
		<style>
			body{ /* 对整个页面进行样式修饰 */
				width: 313px; 
				font-size: 10px;  /* 字体大小 */
			}
			/* solid 实线，dashed 虚线 */
			hr{ border:1px dashed; }
			
			/* 对应单独样式进行设置
				class 使用.please
				id 使用#please
			*/
			#please{
				font-size: 24px;
				font-weight: bold;  /* 加粗 */
			}
			.self{
				/* padding 修饰4周 上右下左（顺时针一圈4个值），空*/
				padding-left: 100px;   /* 左边空一定距离 */
			}
			.note{
				/* padding-top: 20px; 上空 */
				/* padding-bottom: 15px; 下空 */
				margin-top: 20px;
				margin-bottom: 15px;
			}
			.img{
				padding-left: 80px;
			}
		</style>
	</head>
	<body>
		<!-- div标签会自动换行 span不换行：块，实现页面布局 -->
		<div>顾客联</div>
		<div id="please">请您留言取餐账单号</div>
		
		<div class="self">自取顾客联</div>
		<div>永和大王（北三环西路店）</div>
		<div>010-12345678</div>
		
		<div class="self">--结账单--</div>
		<div id="please">账单号：P000010</div>
		<div>账单类型：堂食</div>
		<div>人数：1</div>
		<div>收银员：张静</div>
		<div>开单时间：2020-05-18 15:24:29</div>
		<div>结账时间：2020-05-18 15:25:00</div>
		
		<hr/>
		
		<!-- 表格是没有列概念，它叫做单元格
			页面中换行会被解析一个空格
			table表格、tr行、td单元格
			align横向排列：left居左、center居中、right居右
			valign纵向排列：top居上、center居中、bottom居下
		 -->
		<table border="0">
			<tr>
				<td width="50">数量</td>
				<td width="190">品项</td>
				<td width="50" align="right">金额</td>
			</tr>
			<tr>
				<td valign="top">1</td>
				<!-- 网页中没有换行，解析一个空格，必须使用br标签 -->
				<td>玉米肉松蛋饼2P<br/>
						1 X --玉米肉松蛋饼<br/>
						1 X --现磨豆浆（热/甜）
				</td>
				<td valign="top" align="right">8.00</td>
			</tr>
		</table>
		
		<hr/>
		
		<table border="0">
			<tr>
				<td width="246">合计</td>
				<td width="50" align="right">8.00</td>
			</tr>
			<tr>
				<td>微支付</td>
				<td align="right">8.00</td>
			</tr>
		</table>
		
		<hr/>
		
		<div>打印时间：2020-05-18 07:24:38</div>
		
		<hr/>
		<!-- &nbsp;  代表一个空格，7个空格等价于2个汉字距离  -->
		<div class="note">
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。</div>
		
		<!-- 引入图片，只设置一个，它会等比缩放
			src配置图片来源，相对路径，从自己html文件出发去找
			html所在目录下的images目录，images目录下的qr.png
			只设置宽度，高度会自动算，等比缩放；只设置高度，宽度会等比缩放
			既设置宽，设置高，按要求，不等比
		 -->
		<img class="img" src="images/qr.png" height="150"/>
		
		<div>官网：www.yonghe.com.cn</div>
		<div>加盟热线：86-21-12345678</div>
		<br/><br/>
	</body>
</html>
